<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagrams</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="700" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    /**
     * Helper function to draw an arrow from (fromx, fromy) to (tox, toy).
     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
     * @param {number} fromx - The x-coordinate of the start point.
     * @param {number} fromy - The y-coordinate of the start point.
     * @param {number} tox - The x-coordinate of the end point (arrowhead).
     * @param {number} toy - The y-coordinate of the end point (arrowhead).
     */
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);

        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    /**
     * Draws the first diagram (Fig. 2.1.1).
     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
     */
    function drawDiagram1(ctx) {
        const centerX = 150;
        const centerY = 150;
        const radius = 70;

        ctx.save();
        ctx.lineWidth = 1.5;

        // Draw the circle
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw center 'O' and radius 'R'
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('O', centerX - 10, centerY + 5);

        ctx.beginPath();
        ctx.setLineDash([5, 3]);
        ctx.moveTo(centerX, centerY);
        const rAngle = 225 * Math.PI / 180;
        const rEndX = centerX + radius * Math.cos(rAngle);
        const rEndY = centerY + radius * Math.sin(rAngle);
        ctx.lineTo(rEndX, rEndY);
        ctx.stroke();
        ctx.setLineDash([]);
        
        ctx.fillText('R', centerX + radius * 0.5 * Math.cos(rAngle) - 10, centerY + radius * 0.5 * Math.sin(rAngle) + 10);

        // Draw currents
        ctx.font = 'italic 20px Times New Roman';
        
        // Incoming current
        drawArrow(ctx, centerX, centerY + radius + 40, centerX, centerY + radius);
        ctx.fillText('2I', centerX + 20, centerY + radius + 20);

        // Outgoing current
        drawArrow(ctx, centerX, centerY - radius, centerX, centerY - radius - 40);
        ctx.fillText('2I', centerX + 20, centerY - radius - 20);

        // Draw caption
        ctx.font = '18px sans-serif';
        ctx.fillText('电图 2.1.1', centerX, centerY + radius + 70);

        ctx.restore();
    }

    /**
     * Draws the second diagram (Fig. 2.1.2).
     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
     */
    function drawDiagram2(ctx) {
        const originX = 500;
        const originY = 150;
        const radius = 70;

        ctx.save();
        ctx.lineWidth = 1.5;

        // Draw coordinate axes
        ctx.font = 'italic 20px Times New Roman';
        // z-axis
        drawArrow(ctx, originX, originY + radius + 50, originX, originY - radius - 50);
        ctx.fillText('z', originX + 15, originY - radius - 50);
        // y-axis
        drawArrow(ctx, originX - radius - 20, originY, originX + radius + 50, originY);
        ctx.fillText('y', originX + radius + 50, originY - 15);
        // x-axis
        const x_len = 60;
        const x_angle = 225 * Math.PI / 180;
        drawArrow(ctx, originX - x_len * Math.cos(x_angle), originY - x_len * Math.sin(x_angle), originX + x_len * Math.cos(x_angle), originY + x_len * Math.sin(x_angle));
        ctx.fillText('x', originX + x_len * Math.cos(x_angle) - 15, originY + x_len * Math.sin(x_angle) - 15);


        // Draw spherical current paths
        // Main circle (yz-plane)
        ctx.beginPath();
        ctx.arc(originX, originY, radius, 0, 2 * Math.PI);
        ctx.stroke();
        // Ellipses
        ctx.beginPath();
        ctx.ellipse(originX, originY, radius * 0.7, radius, 0, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.ellipse(originX, originY, radius * 0.4, radius, 0, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw arrows on paths
        const arrowLength = 20;
        drawArrow(ctx, originX - radius, originY + arrowLength / 2, originX - radius, originY - arrowLength / 2);
        drawArrow(ctx, originX - radius * 0.7, originY + arrowLength / 2, originX - radius * 0.7, originY - arrowLength / 2);
        drawArrow(ctx, originX - radius * 0.4, originY + arrowLength / 2, originX - radius * 0.4, originY - arrowLength / 2);

        // Draw origin 'O' and radius 'R'
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('O', originX + 5, originY + 10);
        
        ctx.beginPath();
        ctx.setLineDash([5, 3]);
        ctx.moveTo(originX, originY);
        const rAngle = -45 * Math.PI / 180;
        const rEndX = originX + radius * Math.cos(rAngle);
        const rEndY = originY + radius * Math.sin(rAngle);
        ctx.lineTo(rEndX, rEndY);
        ctx.stroke();
        ctx.setLineDash([]);
        
        ctx.fillText('R', rEndX, rEndY + 15);

        // Draw currents
        ctx.font = 'italic 20px Times New Roman';
        
        // Incoming current
        drawArrow(ctx, originX, originY + radius + 40, originX, originY + radius);
        ctx.fillText('I', originX + 15, originY + radius + 20);

        // Outgoing current
        drawArrow(ctx, originX, originY - radius, originX, originY - radius - 40);
        ctx.fillText('I', originX + 15, originY - radius - 20);

        // Draw caption
        ctx.font = '18px sans-serif';
        ctx.fillText('电图 2.1.2', originX, originY + radius + 70);

        ctx.restore();
    }

    // Main drawing function
    window.onload = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        drawDiagram1(ctx);
        drawDiagram2(ctx);
    };
</script>
</body>
</html>